<template>
  <div class="report-main">
    <div class="report-card">
      <div class="report-head">
        <div class="card-head-wrap">
          <div class="title-name">数据概览</div>
          <div class="wrap-col">
            <div class="day-tags">
              <div class="tag-item active-day">今天</div>
              <div class="tag-item">昨天</div>
              <div class="tag-item">7天</div>
              <div class="tag-item">30天</div>
            </div>
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
            >
            </el-date-picker>
            <el-select v-model="value" placeholder="请选择" size="small" style="margin-left: 8px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="card-body-wrap">
        <div class="box" v-for="(item, index) in labelItems" :key="index">
          <div class="number" v-html="item.value ? item.value : '-' "></div>
          <el-tooltip class="item" effect="dark" placement="top" v-if="item.tips">
            <div class="name">{{ item.title }}</div>
            <div slot="content" v-html="item.tips" />
          </el-tooltip>
          <div class="name" v-else>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="report-card">
      <div class="report-head">
        <div class="card-head-wrap">
          <div class="title-name">所有报表</div>
        </div>
      </div>
      <div class="card-body-wrap">
        <div class="guide-con">
          <div class="item" @click="onNavigationTo('/client/service/services')">
            <div class="icon" style="background-color: rgb(99, 162, 255);">
              <img class="cover" src="@/assets/images/service.png" />
            </div>
            <div class="main">
              <h3>服务量</h3>
              <p>客服工作数量与质量统计报表</p>
            </div>
          </div>
          <div class="item" @click="onNavigationTo('/client/service/checkin')">
            <div class="icon" style="background-color: rgb(159, 97, 217);">
              <img class="cover" src="@/assets/images/time.png" />
            </div>
            <div class="main">
              <h3>客服考勤</h3>
              <p>客服考勤情况统计报表</p>
            </div>
          </div>
          <div class="item" @click="onNavigationTo('/client/service/evaluate')">
            <div class="icon" style="background-color: rgb(255, 192, 105);">
              <img class="cover" src="@/assets/images/like.png" />
            </div>
            <div class="main">
              <h3>客服评价</h3>
              <p>客服评价统计报表</p>
            </div>
          </div>
          <div class="item" @click="onNavigationTo('/client/service/hours')">
            <div class="icon" style="background-color: rgb(115, 209, 61);">
              <img class="cover" src="@/assets/images/card.png" />
            </div>
            <div class="main">
              <h3>每小时数据</h3>
              <p>每个时段所有客服服务量统计报表</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {value: 1, label: '第一组'},
        {value: 1, label: '第二组'},
        {value: 3, label: '第三组'},
      ],
      labelItems: [
        { title: '有效客服数',value: 1, tips: '上班状态有变更、对话数有增减（自<br/>动接入、手动接入、主动发起、结<br/>束、转入、转出等）或接入的对话有<br/>发出消息等任一行为的客服人数'},
        { title: '对话总数',value: 5,tips: '客服处理完并结束的对话数（包含私<br/>聊和群聊对话，对话结束后才会统<br/>计，同个客户或同个群对话多次接入<br/>会统计多次）' },
        { title: '私聊对话数',value: 4, tips: '客服处理完并结束的私聊对话数（同<br/>个客户多次接入会统计多次）' },
        { title: '群聊对话数',value: 1, tips: '客服处理完并结束的群聊对话数（同<br/>个群多次接入会统计多次）' },
        { title: '接待客户数',value: 3, tips: '接待的客户人数（仅统计已完成的对<br/>话）' },
        { title: '发出消息数',value: 3, tips: '' },
        { title: '私聊发出消息数',value: 2, tips: '' },
        { title: '群聊发出消息数',value: 1, tips: ''},
        { title: '平均首次响应时长',value: '8<sub>时</sub>16<sub>分</sub>24<sub>', tips: '从对话被客服接入到客服首次响应的<br/>平均时间' },
        { title: '平均响应时长',value: '8<sub>时</sub>16<sub>分</sub>24<sub>', tips: '对话被客服接入后，客户发出消息到<br/>客服回复消息的平均时间' },
        { title: '私聊平均首次响应时长',value: '58<sub>分</sub>39<sub>', tips: '从对话被客服接入到客服首次响应的<br/>平均时间（只统计私聊对话）' },
        { title: '私聊平均响应时长',value: '58<sub>分</sub>39<sub>', tips: '对话被客服接入后，客户发出消息到<br/>客服回复消息的平均时间（只统计私<br/>聊对话）' },
        { title: '私聊平均对话持续时长',value: '12<sub>时</sub>4<sub>分</sub>12<sub>', tips: '从对话被客服接入至对话结束的平均<br/>时间（只统计私聊对话）' },
        { title: '群聊平均首次响应时长',value: '22<sub>时</sub>51<sub>分</sub>55<sub>', tips: '从对话被客服接入到客服首次响应的<br/>平均时间（只统计群聊对话）' },
        { title: '群聊平均响应时长',value: '22<sub>时</sub>51<sub>分</sub>55<sub>', tips: '对话被客服接入后，群成员发出消息<br/>到客服回复消息的平均时间（只统计<br/>群聊对话）' },
        { title: '群聊平均对话持续时长',value: '22<sub>时</sub>54<sub>分</sub>1<sub>', tips: '从对话被客服接入至对话结束的平均<br/>时间（只统计群聊对话）' },
        { title: '超时未响应数',value: '', tips: '客户发的消息中，客服没有在指定时<br/>间内进行回复的消息条数（超时时间<br/>可在“聊天配置-超时提醒设<br/>置”中设置）' },
        { title: '留言处理数',value: '', tips: '从留言列表主动接入的对话数量' }
      ]
    }
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },
  },
}
</script>
<style lang="scss" scoped>
.report-main {
  padding: 20px;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  .report-card {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    position: relative;
    border-radius: 4px;
    padding: 14px 0;
    .report-head {
      min-height: 48px;
      margin-bottom: -1px;
      padding: 0 24px;
      color: rgba(0, 0, 0, .85);
      font-weight: 500;
      font-size: 16px;
      border-bottom: 1px solid #e9e9e9;
      border-radius: 4px 4px 0 0;
      display: flex;
      align-items: center;
      .card-head-wrap {
        flex: 1 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title-name {
          font-size: 14px;
          color: rgba(0, 0, 0, .85);
          font-weight: 500;
        }
        .wrap-col {
          display: flex;
          .day-tags {
            display: flex;
            align-items: center;
            .tag-item {
              display: inline-block;
              height: 30px;
              text-align: center;
              line-height: 30px;
              width: 50px;
              background: #f4f6f8;
              vertical-align: middle;
              margin-right: 10px;
              color: #555666;
              cursor: pointer;
              font-size: 14px;
              font-weight: 400;
              &.active-day {
                background: #3070ff;
                color: #fff;
              }
            }
          }
        }
      }
    }
    .card-body-wrap {
      padding: 24px 24px 12px;
      background: #ffffff;
      display: flex;
      flex-wrap: wrap;
      .box {
        height: 86px;
        display: inline-block;
        padding: 16px 20px;
        vertical-align: middle;
        margin-right: 1.5%;
        background: #f5f5f5;
        flex: 1 1;
        border-radius: 4px;
        margin-bottom: 12px;
        .number {
          color: #222333;
          font-size: 25px;
          margin: 0;
          line-height: 34px;
          height: 34px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          align-items: baseline;
        }
        .name {
          color: #555666;
          font-size: 14px;
          line-height: 20px;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .guide-con {
        display: flex;
        width: 100%;
        .item {
          width: calc(20% - 16px);
          background: #fff;
          border: 1px solid #e9e9e9;
          padding: 20px;
          display: flex;
          margin-right: 20px;
          cursor: pointer;
          overflow: hidden;
          .icon {
            width: 68px;
            height: 68px;
            overflow: hidden;
            color: #fff;
            text-align: center;
            line-height: 68px;
            display: flex;
            align-items: center;
            justify-content: center;
            .cover {
              width: 28px;
              height: 28px;
            }
          }
          .main {
            margin-left: 20px;
            flex: 1 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h3 {
              margin: 0;
              padding: 0;
              color: #222333;
              font-weight: 400;
              font-size: 14px;
              line-height: 30px;
            }
            p {
              margin: 0;
              padding: 0;
              color: #888999;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
::v-deep .number sub {
  font-size: 14px;
  color: #555666;
  bottom: 0;
  padding: 0 4px;
}
</style>
